/*
 * @Author: Wilbur
 * @Date: 2019-01-08 14:59:16
 * @Last Modified by: Wilbur
 * @Last Modified time: 2019-08-24 09:16:12
 */
<template>
    <div class="container hire-worker-add-wrap">
        <div class="left">
            <el-form
                ref="mainform"
                :model="formData"
                label-position="top"
                status-icon
                :rules="formRule"
                label-width="280px"
                :disabled="false"
            >
                <!-- 赞助商设置 -->
                <div class="form-title">校园代理设置</div>
                <el-form-item
                    class="task-form-item"
                    size="small"
                    label="企业名称"
                >
                    <el-input
                        placeholder="必填"
                        v-model="hire_name"
                        size="small"
                        readonly
                        class="task-input"
                    />
                </el-form-item>
                <el-form-item
                    class="task-form-item"
                    size="small"
                    prop="student_no"
                    label="关联校园代理"
                >
                    <el-select
                        v-model="formData.student_no"
                        filterable
                        class="task-input"
                        placeholder="请选择"
                        :filter-method="filterAmb"
                        @change="fnChangeAmb">
                        <el-option
                            v-for="item in ambFilterList"
                            :key="item.student_no"
                            :label="item.student_name+'('+item.student_phone+')'"
                            :value="item.student_no"/>
                    </el-select>
                </el-form-item>
                <el-form-item
                    class="task-form-item"
                    size="small"
                    prop="worker_name"
                    label="校园代理昵称"
                >
                    <el-input
                        placeholder="必填"
                        v-model="formData.worker_name"
                        size="small"
                        class="task-input"
                    />
                </el-form-item>
                <el-form-item
                    class="task-form-item"
                    size="small"
                    prop="selectedSchool"
                    label="校园代理学校"
                >
                    <el-cascader
                        v-model="formData.selectedSchool"
                        placeholder=""
                        :options="schoolList"
                        :props="props"
                        filterable
                        class="task-input"
                    />
                </el-form-item>
                <el-form-item
                    class="task-form-item"
                    size="small"
                    prop="worker_info"
                    label="校园代理简介"
                >
                    <el-input
                        placeholder="必填"
                        v-model="formData.worker_info"
                        size="small"
                        class="task-input"
                    />
                </el-form-item>

                <el-form-item
                    class="task-form-item"
                    size="small"
                    prop="worker_weixin"
                    label="校园代理微信号"
                >
                    <el-input
                        placeholder="必填"
                        v-model="formData.worker_weixin"
                        size="small"
                        class="task-input"
                    />
                </el-form-item>
                <el-row>
                    <el-col
                        :md="{ span: 12 }"
                        :sm="{ span: 12 }"
                    >
                        <el-form-item
                            class="task-form-item"
                            size="small"
                            prop="worker_head"
                            label="头像图片:"
                        >
                            <el-upload
                                :show-file-list="false"
                                :http-request="e=> {fnUpload(e, 'worker_head')}"
                                accept="image/*"
                                class="upload-demo"
                                action="https://jsonplaceholder.typicode.com/posts/"
                            >
                                <img
                                    v-if="formData.worker_head"
                                    :src="formData.worker_head"
                                    class="avatar"
                                >
                                <i
                                    class="el-icon-upload"
                                    v-if="!formData.worker_head"
                                />
                                <div
                                    class="el-upload__text"
                                    v-if="!formData.worker_head"
                                >点击上传</div>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col
                        :md="{ span: 12 }"
                        :sm="{ span: 12 }"
                    >
                        <el-form-item
                            class="task-form-item"
                            size="small"
                            prop="worker_qrcode"
                            label="二维码图片:"
                        >
                            <el-upload
                                :show-file-list="false"
                                :http-request="e=> {fnUpload(e, 'worker_qrcode')}"
                                accept="image/*"
                                class="upload-demo"
                                action="https://jsonplaceholder.typicode.com/posts/"
                            >
                                <img
                                    v-if="formData.worker_qrcode"
                                    :src="formData.worker_qrcode"
                                    class="avatar"
                                >
                                <i
                                    class="el-icon-upload"
                                    v-if="!formData.worker_qrcode"
                                />
                                <div
                                    class="el-upload__text"
                                    v-if="!formData.worker_qrcode"
                                >点击上传</div>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="operate">
                    <el-button
                        size="small"
                        type="primary"
                        @click="fnSubmit()"
                    >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;提交&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-button>
                </div>
            </el-form>
        </div>
        <div class="right">
            <div class="preview">
                <div class="kefu-dialog-main">
                    <div class="close">
                        <i class="el-icon-circle-close" />
                    </div>

                    <div class="title">
                        <div
                            class="logo"
                            :style="formData.worker_head ? 'background-image: url('+formData.worker_head+')' : ''"/>
                        <div class="detail">
                            <div class="title ellipsis">{{ formData.worker_name ? formData.worker_name : '校园代理昵称' }}</div>
                            <div class="tip">{{ formData.worker_info ? formData.worker_info : "请填写简介" }}</div>
                        </div>
                    </div>
                    <img
                        class="qrcode"
                        v-if="formData.worker_qrcode"
                        :src="formData.worker_qrcode"
                    >
                    <div
                        class="qrcode"
                        v-if="!formData.worker_qrcode"/>
                    <p class="qr-text">微信号：{{ formData.worker_weixin }}</p>

                    <div class="btn-change">换一位</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    components: {},
    data() {
        var validateSchool = (rule, value, callback) => {
            if (!value) {
                console.log('111');
                callback(new Error(rule.message));
                return ;
            } else if (value.length < 3 || !value[0] || !value[1] || !value[2]) {
                callback(new Error(rule.message));
                return;
            }
            callback();
        };
        var validateLength = (rule, value, callback) => {
            if (value.length > rule.maxLength) {
                callback(new Error(rule.message));
                return;
            }
            callback();
        };

        return {
            checkList: [1, 2],
            authResult: {},
            hire_no: '',
            hire_name: '',
            worker_no: '',
            provence: [],
            formData: {
                "student_no": "",
                "worker_name": "",
                "worker_head": "",
                "worker_qrcode": "",
                "worker_info": "",
                selectedSchool: [],
                worker_weixin: ''
            },
            formRule: {
                worker_name: [
                    { required: true, message: '请输入昵称', trigger: 'blur' },
                    { validator: validateLength, message: '最多15字', maxLength: 15, trigger: 'blur' }
                ],
                worker_head: [
                    { required: true, message: '请上传头像', trigger: 'blur' },
                ],
                worker_qrcode: [
                    { required: true, message: '请上传二维码', trigger: 'blur' },
                ],
                worker_info: [
                    { required: true, message: '请输入简介', trigger: 'blur' },
                    { validator: validateLength, message: '最多20字', maxLength: 20, trigger: 'blur' }
                ],
                selectedSchool: [
                    {validator: validateSchool, message: '请选择学校', trigger: 'blur'}
                ],
                worker_weixin: [
                    { required: true, message: '请输入校园代理微信号', trigger: 'blur' },
                ]
            },
            ambList: [],
            ambFilterList: [],
            options: [],
            schoolList: [],
            props: {
                value: 'id',
                label: 'name',
                children: 'children'
            },
            submitting: false,
            init: false,

            baseUrl: '',
            sessionTicket: localStorage.getItem('sessionTicket'),
            escape: escape,
        };
    },
    created() {
        this.authResult = this.$route.meta.authResult;
        this.hire_no = this.$route.query.hire_no ? this.$route.query.hire_no : '';
        this.hire_name = this.$route.query.hire_name;
        this.worker_no = this.$route.query.worker_no ? this.$route.query.worker_no : '';
        this.$store.commit('SET_HEADER', [
            {
                title: "广告系统",
            },
            {
                title: '企业注册数据',
                name: 'hireList',
            },
            {
                title: '校园代理列表',
                name: 'HireWorkerList',
                query: {
                    hire_no: this.hire_no
                }
            }, {
                title: "校园代理设置",
            }
        ]);

        this.fnGetStudentList();
        this.fnGetSchoolList();
        if (this.worker_no) {
            this.fnGetWorker();
        }
    },
    methods: {
        fnInitTimeNow() {
            var timestamp = new Date().getTime();

            return timestamp;
        },
        fnChangeAmb(val){
            for(let i in this.ambList){
                if(this.ambList[i].student_no == val){
                    let value = this.ambList[i];

                    this.formData.worker_name = value.student_name;
                    this.formData.worker_head = value.student_head;
                    this.formData.worker_info = value.student_info;
                    this.formData.selectedSchool = [value.province_id,value.city_id,value.school_id];
                    this.formData.worker_qrcode = '';
                    this.formData.worker_weixin = '';
                }
            }
        },
        filterAmb(query){
            if (query) { //val存在
                this.ambFilterList = this.ambList.filter((item) => {
                    /* eslint-disable */
                    if (!!~item.student_phone.indexOf(query) || !!~item.student_name.indexOf(query)) {
                        return true;
                    }
                    /* eslint-enable */
                });
            } else { //val为空时，还原数组
                this.ambFilterList = this.ambList;
            }
        },
        fnGetSchoolList(){
            this.$post('/student/local_info%5Cschool_tree', {
            }, resp => {
                if(resp.code == 1){
                    this.schoolList = resp.data.tree;
                }
            });
        },
        fnGetStudentList(){
            this.$post('/student/hire_worker%5Cget_student_list', {
                hire_no: this.hire_no
            }, resp => {
                if(resp.code == 1){
                    this.ambList = resp.data ? resp.data.list : [];
                    this.ambFilterList = this.ambList;
                }
            });
        },
        fnGetWorker() {
            this.$post('/student/hire_worker%5Cget', {
                worker_no: this.worker_no
            }, resp => {
                if (resp.code == 1) {
                    resp.data.selectedSchool = [resp.data.province_id, resp.data.city_id ,resp.data.school_id];
                    this.formData = resp.data;
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg
                    });
                }
            });
        },
        fnSubmit() {
            if (this.submitting) {
                return;
            }
            this.$refs.mainform.validate(valid => {
                if (valid) {
                    this.submitting = true;

                    let data = {
                        worker_no: this.worker_no,
                        hire_no: this.hire_no,
                        student_no: this.formData.student_no,
                        worker_name:  this.formData.worker_name,
                        province_id:  this.formData.selectedSchool[0],
                        school_id:  this.formData.selectedSchool[2],
                        city_id:  this.formData.selectedSchool[1],
                        worker_head:  this.formData.worker_head,
                        worker_qrcode:  this.formData.worker_qrcode,
                        worker_info:  this.formData.worker_info,
                        worker_weixin: this.formData.worker_weixin
                    };


                    this.$post('/student/hire_worker%5Csave', data, resp => {
                        if (resp.code == 1) {
                            this.$message({
                                type: 'success',
                                center: true,
                                message: '修改成功'
                            });
                            this.$router.push({
                                name: 'HireWorkerList',
                                query: {
                                    hire_no: this.hire_no
                                }
                            });
                        } else {
                            this.$message({
                                type: 'warning',
                                center: true,
                                message: resp.msg
                            });
                        }
                        this.submitting = false;
                    });

                }
            });
        },
        fnUploadImage(e, success, error) {
            let timeTmp = new Date().getTime();
            let pic = new FormData();

            pic.append('file', e.file);
            this.$upload({
                url: '/__local/common%5Cupload',
                data: pic,
                success: resp => {
                    if (resp.code == 1) {
                        success(resp);
                    } else {
                        this.$message({
                            type: 'warning',
                            message: '上传图片失败',
                            center: true
                        });
                        error(resp);
                    }
                }
            });
        },
        fnUpload(e, name) {
            this.fnUploadImage(e, (resp) => {
                this.$set(this.formData, name, resp.data.url);
            }, (resp) => {
                console.log(resp.msg);
            });
        },
        fnReset() {
            this.$refs.mainform.resetFields();
        }
    },
};
</script>

<style lang="less" scoped>
  .avatar {
    width: 100%;
    height: 100%;
  }
  .margin-top {
    margin-top: 15px;
  }
  .hire-worker-add-wrap {
    background: #fff;
    margin: 15px;
    margin-bottom: 0;
    padding: 30px;
    overflow: auto;
    display: flex;
    & > .left {
      width: 500px;
    }
    & > .right {
      flex: 1;
    }
  }
  .form-unit {
    margin-bottom: 40px;
  }
  .form-title {
    font-size: 16px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
    line-height: 18px;
    padding: 0 10px;
    border-left: 2px solid #1890ff;
    margin-bottom: 20px;
  }
  .task-input {
    width: 435px !important;
  }
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  input[type="number"] {
    -moz-appearance: textfield;
  }

  .operate {
    width: 100%;
    text-align: center;
    margin-top: 20px;
  }

  .preview {
    position: relative;
    margin-top: -100px;
    width: 482px;
    height: 905px;
    background-image: url(http://cdn.zsdx.cn/admin/images/student/iphone.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    transform: scale(0.656);

    .kefu-dialog-main {
      top: 180px;
      left: 50%;
      transform: translateX(-50%);
      width: 300px;
      background: linear-gradient(
        360deg,
        rgba(250, 252, 253, 1) 0%,
        rgba(242, 247, 250, 1) 100%
      );
      border-radius: 8px;
      padding: 30px 24px 16px;
      position: absolute;
    }
    .close {
      font-size: 18px;
      position: absolute;
      top: 16px;
      right: 16px;
      color: #606972;
    }
    .title {
      text-align: center;
      .logo {
        width: 66px;
        height: 66px;
        margin: 0 auto 5px;
        background-image: url(//cdn.zsdx.cn/tuan/images/mine/kf-logo.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
      }
      .detail {
        .title {
          max-width: 100%;
          font-size: 18px;
          font-weight: 500;
          color: rgba(63, 69, 75, 1);
          line-height: 25px;
        }
        .tip {
          font-size: 12px;
          color: rgba(96, 105, 114, 1);
          line-height: 17px;
          margin-top: 5px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          /*! autoprefixer: off */
          -webkit-box-orient: vertical;
          /* autoprefixer: on */
          -webkit-line-clamp: 2;
        }
      }
    }
    .qrcode {
        width: 252px;
        height: 252px;
        margin: 0 auto;
        margin-top: 24px;
        user-select: all;
        background-color: #ccc;
      }
      .qr-text{
            font-size: 18px;
            color: #606972;
            margin-top: 15px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            text-align: center;
      }
      .btn-change {
        font-size: 14px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 20px;
        text-align: center;
        position: absolute;
        bottom: -35px;
        left: 50%;
        transform: translateX(-50%);
      }
  }
</style>
<style lang="less">
  .hire-worker-add-wrap {
    .el-upload {
      width: 90px;
      height: 90px;
      border: 1px dashed rgba(151, 151, 151, 1);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      color: rgba(136, 144, 156, 1);
      line-height: 22px;
      &:hover {
        border-color: #20a0ff;
      }
      .el-icon-upload {
        color: #20a0ff;
        font-size: 18px;
      }
    }
  }
</style>
